<template>
	<div>
		<el-form size="small" :inline="true" :model="queryform" class="demo-form-inline">
			<el-form-item label="菜单名称" prop="title">
				<!-- 加上prop属性 可以让form组件找到form item  -->
				<el-input v-model="queryform.title" placeholder="title"></el-input>
			</el-form-item>

			<el-form-item label="菜单状态" prop="menuState">
				<el-select v-model="queryform.menuState" placeholder="状态">
					<el-option v-for="item in State" :key="item.dicDataVal" :label="item.dicDataLabel"
						:value="item.dicDataVal"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" size="mini" @click="OnquerySubmit">查询</el-button>
				<el-button @click="resetForm()" size="mini">重置</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-button type="success" @click="openAddDialog()" size="mini">添加</el-button>
			<el-button type="warning" @click="openeditDialog()" size="mini" :disabled="butStatus">修改</el-button>
			<el-button type="error" @click="opendelDialog()" size="mini" :disabled="butStatus">删除</el-button>
			<el-button type="primary" icon="el-icon-sort" plain size="mini" @click="openOrFold">展开/折叠</el-button>
		</div>
		<!-- 表格 -->
		<el-table :data="tableData" ref="table" style="width: 100%;" row-key="id"
			:default-sort="{prop: 'showOrder', order: 'ascending'}"
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}" highlight-current-row
			@current-change="handleCurrentRowChange">
			<el-table-column prop="title" label="菜单名称">
			</el-table-column>

			<el-table-column prop="showOrder" label="排序">
			</el-table-column>

			<el-table-column prop="path" label="请求地址">
			</el-table-column>

			<el-table-column prop="menuType" label="类型">
				<template v-slot="scope">
					<div v-if="scope.row.menuType == 0">
						<el-tag type="warning">目录</el-tag>
					</div>
					<div v-else>
						<el-tag>菜单</el-tag>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="menuState" label="可见">
				<template v-slot="scope">
					<div v-if="scope.row.menuState == 0">
						<el-tag type="success">显示</el-tag>
					</div>
					<div v-else>
						<el-tag type="danger">隐藏</el-tag>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="menuPermit" label="权限标识">
			</el-table-column>
		</el-table>

		<!-- 添加对话框 -->
		<el-dialog title="添加" :visible.sync="openAddDialogform" width="680px" append-to-body>
			<el-form ref="addform" :model="addform" label-width="100px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="上级菜单:" prop="pid">
							<span class="demonstration"></span>
							<el-cascader ref="cascaderMallCatergory" v-model="addform.pid" placeholder="上级菜单"
								:options="options" :show-all-levels="false"
								:props="{ checkStrictly: true, value: 'id', label: 'title',emitPath:false}" clearable>
							</el-cascader>
							<!-- 上级菜单id 绑定的为新增的id -->
						</el-form-item>

					</el-col>
					<el-col :span="24">
						<el-form-item label="菜单类型:" prop="menuType">
							<el-radio v-model="addform.menuType" label="0">目录</el-radio>
							<el-radio v-model="addform.menuType" label="1">菜单</el-radio>
							<el-radio v-model="addform.menuType" :label="2">按钮</el-radio>
							<div v-if="addform.menuType==0">
								<el-col :span="24">
									<el-form-item label="菜单名称:" prop="title">
										<el-input v-model="addform.title" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="显示排序:" prop="showOrder">
										<el-input v-model="addform.showOrder" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="图标:" prop="menuFlag">
										<el-input v-model="addform.menuFlag" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="菜单状态:" prop="menuState">
										<el-input v-model="addform.menuState" />
									</el-form-item>
								</el-col>
							</div>

							<div v-if="addform.menuType==1">
								<el-col :span="24">
									<el-form-item label="菜单名称:" prop="title">
										<el-input v-model="addform.title" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="请求地址:" prop="path">
										<el-input v-model="addform.path" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="打开方式:" prop="openWay">
										<el-input v-model="addform.openWay" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="权限标识:" prop="menuPermit">
										<el-input v-model="addform.menuPermit" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="显示排序:" prop="showOrder">
										<el-input v-model="addform.showOrder" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="图标:" prop="menuFlag">
										<el-input v-model="addform.menuFlag" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="菜单状态:" prop="menuState">
										<!-- <el-input v-model="addform.menuState" placeholder="菜单状态" /> -->
										<template>
											<el-radio v-model="editform.menuState" :label="0">显示</el-radio>
											<el-radio v-model="editform.menuState" :label="1">隐藏</el-radio>
										</template>
									</el-form-item>
								</el-col>
							</div>
							<div v-if="addform.menuType==2">
								<el-col :span="24">
									<el-form-item label="操作名称:" prop="title">
										<el-input v-model="addform.title" />
									</el-form-item>
								</el-col>
								
								<el-col :span="24">
									<el-form-item label="权限标识:" prop="menuPermit">
										<el-input v-model="addform.menuPermit" />
									</el-form-item>
								</el-col>
							
								<el-col :span="24">
									<el-form-item label="显示排序:" prop="showOrder">
										<el-input v-model="addform.showOrder" />
									</el-form-item>
								</el-col>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="addsubmitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 修对话框 -->
		<el-dialog title="修改" :visible.sync="openEditDialogform" width="680px" append-to-body>
			<el-form ref="editform" :model="editform" label-width="100px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="上级菜单:" prop="pid">
							<span class="demonstration"></span>
							<el-cascader ref="cascaderMallCatergory" v-model="editform.pid" placeholder="上级菜单"
								:options="options" :show-all-levels="false"
								:props="{ checkStrictly: true, value: 'id', label: 'title',emitPath:false}" clearable>
							</el-cascader>
							<!-- 上级菜单id 绑定的为新增的id -->
						</el-form-item>

					</el-col>
					<el-col :span="24">
						<el-form-item label="菜单类型:" prop="menuType">
							<el-radio v-model="editform.menuType" :label="0">目录</el-radio>
							<el-radio v-model="editform.menuType" :label="1">菜单</el-radio>
							<el-radio v-model="editform.menuType" :label="2">按钮</el-radio>

							<div v-if="editform.menuType==0">

								<el-col :span="24">
									<el-form-item label="菜单名称:" prop="title">
										<el-input v-model="editform.title" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="显示排序:" prop="showOrder">
										<el-input v-model="editform.showOrder" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="图标:" prop="menuFlag">
										<el-input v-model="editform.menuFlag" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="菜单状态:" prop="menuState">
										<el-input v-model="editform.menuState" />
									</el-form-item>
								</el-col>
							</div>

							<div v-if="editform.menuType==1">

								<el-col :span="24">
									<el-form-item label="菜单名称:" prop="title">
										<el-input v-model="editform.title" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="请求地址:" prop="path">
										<el-input v-model="editform.path" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="打开方式:" prop="openWay">
										<el-input v-model="editform.openWay" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="权限标识:" prop="menuPermit">
										<el-input v-model="editform.menuPermit" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="显示排序:" prop="showOrder">
										<el-input v-model="editform.showOrder" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="图标:" prop="menuFlag">
										<el-input v-model="editform.menuFlag" />
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="菜单状态:" prop="menuState">
										<!-- <el-input v-model="editform.menuState" placeholder="菜单状态" /> -->
										<template>
											<el-radio v-model="editform.menuState" :label="0">显示</el-radio>
											<el-radio v-model="editform.menuState" :label="1">隐藏</el-radio>
										</template>
									</el-form-item>
								</el-col>
							</div>
							
							<div v-if="editform.menuType==2">
							
								<el-col :span="24">
									<el-form-item label="菜单名称:" prop="title">
										<el-input v-model="editform.title" />
									</el-form-item>
								</el-col>
							
								<el-col :span="24">
									<el-form-item label="权限标识:" prop="menuPermit">
										<el-input v-model="editform.menuPermit" />
									</el-form-item>
								</el-col>
							
								<el-col :span="24">
									<el-form-item label="显示排序:" prop="showOrder">
										<el-input v-model="editform.showOrder" />
									</el-form-item>
								</el-col>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="editsubmit">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>



	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 查询数据
				queryform: {
					title: "",
					menuState: "",
				},

				//下拉状态
				State: [],
				//表格数据
				tableData: [],
				openStatus: 2,
				//级联


				//添加数据
				openAddDialogform: false,
				//选择的父级id
				chosenStr: [],
				addform: { //菜单

					pid: "",
					menuType: "",
					title: "",
					path: "",
					openWay: "",
					menuPermit: "",
					showOrder: "",
					menuFlag: "",
					menuState: "",
				},
				//修改数据
				openEditDialogform: false,
				editform: {
					pid: "",
					menuType: "",
					title: "",
					path: "",
					menuPermit: "",
					showOrder: "",
					menuFlag: "",
					menuState: "",
				},
				// 级联
				defaultProps: {
					children: "children",
					label: "title",
					value: "pid",
					emitPath: false,
				},
				options: [],

				butStatus: true,
				icons: ['el-icon-user', 'el-icon-brush', 'el-icon-more-outline', 'el-icon-star-off', 'el-icon-goods',
					'el-icon-warning-outline', 'el-icon-question', 'el-icon-zoom-in', 'el-icon-help', 'el-icon-bell',
					'el-icon-s-operation', 'el-icon-edit', 'el-icon-edit-outline', 'el-icon-folder',
					'el-icon-folder-opened', 'el-icon-folder-add', 'el-icon-folder-remove'
				],
			}
		},


		methods: {
			// 重置查询
			resetForm() {
				// this.$refs[queryform].resetFields();
				this.queryform = {
					title: "",
					menuState: "",
				};
				this.getMenuTree(); //加载属性数据
			},
			//查询
			OnquerySubmit() {
				this.$axios.get("/menu/getMenuByparams", {
						params: this.queryform
					})
					.then(resp => {
						this.tableData = resp.data;
					})
			},

			//选中当前行,高亮
			handleCurrentRowChange(val) {
				this.currentRow = val;
				this.butStatus = false;
			},

			//修改提交
			editsubmit() {
				this.openEditDialogform = false;
				this.$axios.put("menu", this.editform)
					.then(resp => {
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '修改成功',
							});
							this.getMenuTree(); //加载属性数据
						} else {
							this.$message({
								type: 'error',
								message: '修改失败'
							});
						}
					})
			},
			//添加表单提交
			addsubmitForm() {
				this.openAddDialogform = false;

				if (this.addform.menuType == 0) { //目录
					this.$axios.post("/menu/insert2", this.addform)
						.then(resp => {
							if (resp.code == 20000) {
								this.$message({
									type: 'success',
									message: '新增目录成功'
								});
								this.getMenuTree(); //加载属性数据
							} else {
								this.$message({
									type: 'error',
									message: '新增失败'
								});
							}
						})
				} else if (this.addform.menuType == 1||this.addform.menuType == 2) { //菜单
					this.pid = 0;
					this.$axios.post("/menu/insert", this.addform)
						.then(resp => {
							if (resp.code == 20000) {
								this.$message({
									type: 'success',
									message: '新增菜单成功'
								});
								this.getMenuTree(); //加载属性数据
							} else {
								this.$message({
									type: 'error',
									message: '新增失败'
								});
							}
						})
				}
			},

			//打开添加会话框
			openAddDialog() {
				this.openAddDialogform = true;


			},
			//打开修改会话框
			openeditDialog() {
				this.openEditDialogform = true;
				this.$axios.get("/menu/getMenuById?id=" + this.currentRow.id)
					.then(resp => {
						if (resp.code == 20000) {
							this.editform = resp.data;
							if (this.editform.path != null) {
								this.editform.menuType == 1
							} else if (this.editform.path == null) {
								this.editform.menuType == 0
							}

						}
					})
			},
			//删除
			opendelDialog() {
				this.$confirm(`此操作将永久删除编号为${this.currentRow.id}的数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete("/menu?id=" + this.currentRow.id).then(resp => {
						if (resp.code == 20000) {
							this.$message.success(`删除编号为${this.currentRow.id}的数据` + resp.msg);
							this.getMenuTree(); //加载属性数据
						} else {
							this.$message.error(`删除编号为${this.currentRow.id}的数据` + resp.msg);
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			// 表单数据
			getMenuTree() {
				this.$axios.get("/menu/getallmenu")
					.then(resp => {
						if (resp.code == 20000) {
							this.tableData = resp.data;
							this.options = resp.data; //为状态选择框数组
						} else if (resp.code == 50002) {
							this.$message.error(resp.msg);
						}
					})
			},
			getMenuStatus() {
				this.$axios.get("/users/dic/sys_show_hide").then(resp => {
					this.State = resp.data;

				});

			},

			// 是否展开table(展开与折叠切换)
			openOrFold() {
				if (this.openStatus == 1) {
					this.tableData.forEach(row => {
						this.$refs.table.toggleRowExpansion(row, false) //全部折叠
					})
					this.openStatus = 2;
				} else if (this.openStatus == 2) {
					this.tableData.forEach(row => {
						this.$refs.table.toggleRowExpansion(row, true) //全部折叠
					})
					this.openStatus = 1;
				}

			},



			cancel() {
				this.openAddDialogform = false;
				this.openEditDialogform = false;
				//取消时,刷新表单
				this.addform = {
					pid: "",
					menuType: "",
					title: "",
					path: "",
					openWay: "",
					menuPermit: "",
					showOrder: "",
					menuFlag: "",
					menuState: "",
				};

			}


		},
		mounted() {
			this.getMenuTree(); //加载属性数据
			this.getMenuStatus(); //获取菜单状态
		},
		watch: {

			//vue的watch  机制 可以监控数据的改变
			//配合watch机制 找到更新数据的时机 在这里加入自己的代码
			tableData(newValue, oldValue) {
				// console.log(newValue);
				// 	console.log(oldValue);
				//table刷新的时机,table刷新后,按钮禁用
				this.$nextTick(function() {
					this.butStatus = true;
				})
			}

		}

	}
</script>

<style>
</style>
